<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>珠峰培训之css3西游</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="wk wkM per"></div>
    <div class="bj bjM per"></div>
    <div class="ts tsM per"></div>
    <div class="ss ssM per"></div>
    <div class="bg_box">
        <ul class="bg">
            <li></li>
        </ul>
    </div>
    <!--<div class="test">-->
        <!--<img  class='img' src="./imgs/wk.png" style="left: 0" alt="">-->
    <!--</div>-->
</body>
</html>
<script>
    // var wk = document.getElementsByClassName('wk')[0],
    //     bj = document.getElementsByClassName('bj')[0],
    //     ts = document.getElementsByClassName('ts')[0],
    //     ss = document.getElementsByClassName('ss')[0];
    // wk.onclick = function () {
    //     let str = this.className;
    //     let ary = str.split(' ');
    //     if(/M/.test(str)){
    //         this.className = ary[0]
    //     }else {
    //         this.className = this.className + ' ' + this.className+"M";
    //     }
    // };

    let pers = document.getElementsByClassName('per');
    for(let i = 0; i < pers.length; i++){
        pers[i].t = pers[i].offsetTop;
        pers[i].onclick = function () {
            // let str = this.className;
            // let ary = str.split(' ');
            // if(/M/.test(str)){
            //     this.className = ary[0]
            // }else {
            //     this.className = this.className + ' ' + this.className+"M";
            // }
            if(this.offsetTop < 20){
                this.style.top = this.t + 'px';
            }else {
                this.style.top = this.offsetTop - 50 + 'px' ;
            }
            // this.style.top = this.offsetTop - 50 + 'px' ;
        }
    }

    // let img = document.getElementsByClassName('img')[0];
    // let timer = window.setInterval(function () {
    //     let x = parseFloat(img.style.left)||0;
    //     if(x <= -1600){
    //         img.style.left = 0;
    //     }else {
    //         img.style.left = x-200+'px';
    //     }
    // },3000)
</script>  